<template>
  <div>
    <ListSearch :eventTypeLst="eventTypeLst" @search="onSearch" />
    <a-divider dashed />
    <div class="top">
      <a-space>
        <a-button v-if="permissions_dycl.includes('dycl:dycl.dyclList:add')" type="primary" @click="addItem">新增申报</a-button>
        <a-button v-if="permissions_dycl.includes('dycl:dycl.dyclList:import')" @click="importItems">批量导入</a-button>
        <a-button v-if="permissions_dycl.includes('dycl:dycl.dyclList:export')" @click="exportItems">批量导出</a-button>
      </a-space>
      <a-space>
        <span class="antbtn" @click="onRefresh">刷新<a-icon type="reload" /></span>
      </a-space>
    </div>
    <template v-if="dataLst && dataLst.length > 0">
      <div>
        <ListItem v-for="item in dataLst" :key="item.id" :dataSource="item" @deleteItem="onDeleteItem" />
      </div>
      <div style="text-align: right">
        <a-pagination v-model="pageNo" :total="total" :pageSize="pageSize" @change="onPageChange" />
      </div>
    </template>
    <a-empty v-else></a-empty>
    <a-modal v-model="modalImportVisible" :destroyOnClose="true" title="批量导入" okText="下一步" @ok="importOk">
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="选择模板" required>
        <a-select
          v-model="templateIdImport"
          :options="templateLst"
          :filterOption="filterOption"
          show-search
          placeholder="请选择"
          style="width: 100%"
          @change="onImportTemplateChange"
        />
      </a-form-item>
    </a-modal>
    <a-modal v-model="modalExportVisible" :destroyOnClose="true" title="批量导出" okText="下一步" @ok="exportOk">
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="选择模板" required>
        <a-select
          v-model="templateIdExport"
          :options="templateLst"
          :filterOption="filterOption"
          show-search
          placeholder="请选择"
          style="width: 100%"
          @change="onExportTemplateChange"
        />
      </a-form-item>
    </a-modal>
    <a-modal v-model="modalVisible" :destroyOnClose="true" title="新增申报" okText="下一步" @ok="addOk">
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="接单时间" required>
        <a-date-picker v-model="takeOrdersDate" style="width: 100%" />
      </a-form-item>
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="是否优先处理" required>
        <a-radio-group v-model="isPrecedence">
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="选择模板" required>
        <a-select
          v-model="templateId"
          :options="templateLst"
          :filterOption="filterOption"
          show-search
          placeholder="请选择"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="接单客服" required>
        <a-select
          v-model="takeOrdersUserId"
          :options="dispatchLst"
          :filterOption="filterOption"
          show-search
          placeholder="请选择"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }" label="所属用工单位" required>
        <a-select
          v-model="companyId"
          :options="companyLst"
          placeholder="请选择"
          :filterOption="filterOption"
          show-search
          style="width: 100%"
        />
      </a-form-item>
    </a-modal>
    <ExportBox
      v-model="exportVisible"
      :eventTypeLst="eventTypeLst"
      :isFinish="isFinish"
      :templateId="templateIdExport"
      :templateName="templateNameExport"
    />
  </div>
</template>
<script>
import ListSearch from "./components/listSearch.vue";
import ListItem from "./components/listItem.vue";
import ExportBox from "./components/exportBox.vue";
import { treatmentDisposeEventsReq, delTreatmentDisposeEventsReq } from "./api";
import moment from "moment";
import { mapGetters } from "vuex";
export default {
  name: "",
  components: { ListSearch, ListItem, ExportBox },
  mixins: [],
  props: {
    eventTypeLst: {
      type: Array,
      default: () => []
    },
    dispatchLst: {
      type: Array,
      default: () => []
    },
    templateLst: {
      type: Array,
      default: () => []
    },
    companyLst: {
      type: Array,
      default: () => []
    },
    isFinish: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      exportVisible: false,
      templateIdImport: undefined,
      templateIdExport: undefined,
      templateNameExport: undefined,
      templateNameImport: undefined,
      modalImportVisible: false,
      modalExportVisible: false,
      takeOrdersDate: null,
      isPrecedence: false,
      templateId: undefined,
      takeOrdersUserId: undefined,
      companyId: undefined,
      modalVisible: false,
      dataLst: [],
      searchParams: {},
      pageNo: 1,
      pageSize: 8,
      total: 0
    };
  },
  computed: {
    ...mapGetters(["permissions_dycl"])
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    onDeleteItem(item) {
      delTreatmentDisposeEventsReq(item.id)
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("删除成功");
            this.loadData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    exportOk() {
      if (this.templateIdExport) {
        this.modalExportVisible = false;
        this.exportVisible = true;
      } else {
        this.$message.error("请选择模板");
      }
    },
    exportItems() {
      this.templateIdExport = undefined;
      this.modalExportVisible = true;
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    addOk() {
      if (this.takeOrdersDate && this.templateId && this.takeOrdersUserId && this.companyId) {
        localStorage.setItem(
          "addDaiyuchuliItem",
          JSON.stringify({
            takeOrdersDate: this.takeOrdersDate.format("YYYY-MM-DD"),
            isPrecedence: this.isPrecedence,
            templateId: this.templateId,
            takeOrdersUserId: this.takeOrdersUserId,
            takeOrdersUserName: findName(this.takeOrdersUserId, this.dispatchLst),
            companyId: this.companyId,
            companyName: findName(this.companyId, this.companyLst)
          })
        );
        this.$router.push("/daiyuchuli/add");
      } else {
        this.$message.error("请填写完整信息");
      }
    },
    onExportTemplateChange(val, option) {
      this.templateNameExport = option.componentOptions.children[0].text;
    },
    onImportTemplateChange(val, option) {
      this.templateNameImport = option.componentOptions.children[0].text;
    },
    importOk() {
      if (this.templateIdImport) {
        localStorage.setItem(
          "importDaiyuchuliItem",
          JSON.stringify({
            id: this.templateIdImport,
            name: this.templateNameImport
          })
        );
        this.$router.push("/daiyuchuli/upload");
      } else {
        this.$message.error("请选择模板");
      }
    },
    importItems() {
      this.templateIdImport = undefined;
      this.modalImportVisible = true;
    },
    addItem() {
      this.takeOrdersDate = moment();
      this.isPrecedence = false;
      this.templateId = undefined;
      this.takeOrdersUserId = undefined;
      this.companyId = undefined;
      this.modalVisible = true;
    },
    onPageChange(p1) {
      this.pageNo = p1;
      this.loadData();
    },
    onRefresh() {
      this.pageNo = 1;
      this.loadData();
    },
    onSearch(params) {
      this.searchParams = params;
      this.pageNo = 1;
      this.loadData();
    },
    loadData() {
      const params = {
        isFinish: this.isFinish,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...(this.searchParams || {})
      };
      treatmentDisposeEventsReq(params)
        .then((res) => {
          if (res && res.data) {
            this.dataLst = res.data.entities;
            this.total = res.data.entityCount;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
function findName(val, lst) {
  const idx = lst.findIndex((item) => item.value === val);
  if (idx > -1) {
    return lst[idx]["label"];
  }
  return null;
}
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 24px;
}
.antbtn {
  font-size: 12px;
  color: rgba(118, 120, 133, 1);
  cursor: pointer;
  ::v-deep .anticon {
    margin-left: 4px;
  }
}
</style>
